<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="server/b3.php" id="J_Form">
        <input type="text" name="userName" placeholder="账号" id="J_Username">
        <br>
        <input type="password" name="password" placeholder="密码" id="J_Password">
        <br>
        <button type="submit" class="J_SubmitBtn">提交</button>
    </form>
    <script>
        //表单输入
        var oUsername = document.getElementById('J_Username'),
            oPassword = document.getElementById('J_Password'),
            oSubmitBtn = document.getElementsByClassName('J_SubmitBtn')[0],
            submitUrl = document.getElementById('J_Form').action;
        oSubmitBtn.onclick = function(e) {
            var e = e || window.event;
            e.preventDefault();
            var userName = oUsername.value;
            password = oPassword.value;
            if (userName.length < 6 || userName.length > 20) {
                alert('用户名6-20位')
                return
            }
            if (password.length < 6 || password.length > 20) {
                alert('用户名6-20位')
                return
            }
            alert('前端校验：输入合法，提交后端验证')
            $.ajax({
                url: submitUrl,
                type: 'POST',
                dataType: 'TEXT',
                data: {
                    username: userName,
                    password: password
                },
                success: function(data) {
                    manageco
                    alert(data)
                }
            })
        }
    </script>
</body>

</html>